<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>添加新商品</h3>
		<hr>
		商品标题：<input type="text" id="biaoti"><br>
		商品单价：<input type="text" id="danjia"><br>
		<input type="button" value="保存" id="baocun">
		
		<script>
		  //为按钮的“单击事件”指定处理方法
		  baocun.onclick = function(){
			  let bt = biaoti.value
			  let dj = danjia.value
			  
			  //必须对请求主体数据中可能出现的中文进行编码
			  //bt = encodeURI(bt)
			  let data = `title=${bt}&price=${dj}`
			  
			  //1创建对象
			  let xhr = new XMLHttpRequest()
			  //2打开连接
			  xhr.open('POST', '/v2/product/add')
			  //2.5修改请求消息头部
			  //xhr默认发起的请求内容类型是“普通文本(未经编码)”——根据HTTP协议，服务器是拒收的
			  //xhr.setRequestHeader('Content-Type','text/plain;charset=UTF-8')
			  //凡是XHR发起的有主体的请求，必须修改请求消息内容类型
			  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8')
			  //3准备处理
			  xhr.onload = function(){
				  console.log(xhr.responseText)
			  }
			  //4发送请求
			  xhr.send( data )  //此处发送请求主体数据：k=v&k=v&...
			  
		  }
		</script>
	</body>
</html>
